<template>
	<div class="cityheader">
			<div class="headtop" @click="toHome">
						<span class="iconfont">&#xe624;</span>
				<p>城市选择</p>
			</div>
			
			<div class="headbottom">
			  <ul>
				 <li class="active">境内</li>
				 <li>境外·港澳台</li>
			  </ul>
			</div>
	
	</div>
	
	
</template>

<script>
	export default{
		methods:{
			toHome(){
				this.$router.push("./")
			}
		}
		
		
		
	}
	
	
</script>

<style  scoped lang="stylus">
@import "../../../assets/css/var.styl"
.cityheader{
	background-color: $bgcolor;
	 width: 100%;
}
 .cityheader .headtop{
 	    width: 100%;
		font-size: .16rem;
		color: #FFFFFF;
		height: .44rem;
		display: flex;
		align-items: center;
		text-align: center;
	}
	.cityheader .headtop span{
		float: left;
		font-size: .18rem;
		font-weight: bold;
		width: .4rem;
		color: #FFFFFF;
	}
	.cityheader .headtop p{
		flex: 1;
		height: .3rem;
		line-height: .3rem;
		margin-left: -.4rem;
	}
	.cityheader .headbottom{
		height: .4rem;
		line-height: .4rem;
		font-size: .14rem;
		clear: both;
		overflow: hidden;
	}
	.cityheader .headbottom ul{
		display: flex;
		justify-content: center;
		padding: .1rem 0;
	}
	.cityheader .headbottom ul li{
		width: 35%;
		height: .18rem;
		line-height: .18rem;
		border: 1px solid #FFFFFF;
		float: left;
		text-align: center;
		color: #FFFFFF;
	}
	.cityheader .headbottom ul li.active{
		background: #FFFFFF;
		color: $bgcolor;
	}
	
</style>
